TLDR: 透過 Animate UI 元件,讓網頁動起來~
Animate UI 受到 Shadcn/ui 和 Magic UI 的啟發,提供 React 開發者易於整合和擴展的元件。它以 Tailwind CSS 和 Motion 為基礎打造,並且非常方便整合 Shadcn/ui、Radix UI、Base UI 與 Headless UI 框架。
並且在想要使用的地方,透過 CLI 或直接複製程式碼到專案中,即可使用。
本篇文章主要以 shadcn/ui CLI 作為操作,並且使用 Next.JS 為 Web 開發框架。亦可使用
Vite、Laravel、React Router、Remix、Astro、TanStack Start、TanStack Router 等套件。其他框架安裝步驟請參考:Shadcn/ui Installation
安裝 Node.JS,在系列教學,我會使用 Node.js v24.7.0
,若想要用 Node.js v22.19.0 (LTS)
也是完全 OK der~
在教學中,會使用 npx 安裝,若有需要使用 npm 進行也可以自行調整。詳細差異可參考:[NodeJS] npx 是什麼? 跟 npm 差在哪?
建立專案,並且根據專案類型選擇專案形式。至於該選擇哪種專案,可以參考 Summer。桑莫。夏天 - 該用 Monorepo 嗎?比較 Monolith vs Multi-Repo vs Monorepo,這邊我以預設的 Next.js 為例。
npx shadcn@latest init
設定專案名稱,這邊我設定為 day1
設定主色調,詳細顏色可以參考 Shadcn/ui Colors
看到 Success 就代表完成拉!
接著將終端機切換到專案根目錄中,並執行 npm run dev
cd day1
npm run dev
打開瀏覽器,輸入 http://localhost:3000
即可看到網站畫面
今天的我們學會如何啟用專案,明天將會繼續介紹 Animate UI 編輯器設定 - MCP,讓我們在開發時可以更得心應手 🎉 。